<!doctype html>
<html>

<head>
    <style>
        #box {
            width: 252px;
            font: 25px/25px 宋体;
            margin: 0 auto;
            background: #000;
            color: skyblue;
            border: #999 20px ridge;
            text-shadow: 0 0 1px #0f0;
        }
    </style>
</head>

<body>
    <div id="box">
    </div>
    <script>
        // eval() 函数会将传入的字符串当做 JavaScript 代码进行执行
        var map = eval("[" + Array(23).join("0x801,") + "0xfff]");
        // 俄罗斯方块7种形状，及其对应翻转后的形状
        var tatris = [[0x6600], [0x2222, 0xf00], [0xc600, 0x2640], [0x6c00, 0x4620], [0x4460, 0x2e0, 0x6220, 0x740], [0x2260, 0xe20, 0x6440, 0x4700], [0x2620, 0x720, 0x2320, 0x2700]];
        // 设置一个变量保存键盘事件当中需要使用的方向键序号
        var keycom = { "38": "rotate(1)", "40": "down()", "37": "move(2,1)", "39": "move(0.5,-1)" };
        // 声明全局变量
        var dia, pos, bak, run;
        // 设置开始
        function start() {
            // 设置一个变量保存7种形状种随机的一种
            dia = tatris[~~(Math.random() * 7)];
            // bak 显示信息 pos记录当前的俄罗斯方块的信息
            bak = pos = { fk: [], y: 0, x: 4, s: ~~(Math.random() * 4) };
            rotate(0);
        }
        // 设置结束
        function over() {
            // 按键事件取消
            document.onkeydown = null;
            // 停止定时器
            clearInterval(run);
            alert("GAME OVER");
        }
        // 显示程序
        function update(t) {
            bak = { fk: pos.fk.slice(0), y: pos.y, x: pos.x, s: pos.s };
            if (t) return;
            for (var i = 0, a2 = ""; i < 22; i++)
                a2 += map[i].toString(2).slice(1, -1) + "<br/>";
            for (var i = 0, n; i < 4; i++)
                if (/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g, "\u25a1")))
                    a2 = a2.substr(0, n = (bak.y + i + 1) * 15 - RegExp.$_.length - 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length);
            document.getElementById("box").innerHTML = a2.replace(/1/g, "\u25a0").replace(/0/g, "\u3000");
        }
        // 判断
        function is() {
            for (var i = 0; i < 4; i++)
                if ((pos.fk[i] & map[pos.y + i]) != 0) return pos = bak;
        }
        // 翻转操作
        function rotate(r) {
            var f = dia[pos.s = (pos.s + r) % dia.length];
            for (var i = 0; i < 4; i++)
                pos.fk[i] = (f >> (12 - i * 4) & 15) << pos.x;
            update(is());
        }
        // 下移操作
        function down() {
            ++pos.y;
            if (is()) {
                for (var i = 0; i < 4 && pos.y + i < 22; i++)
                    if ((map[pos.y + i] |= pos.fk[i]) == 0xfff)
                        map.splice(pos.y + i, 1), map.unshift(0x801);
                if (map[1] != 0x801) return over();
                start();
            }
            update();
        }
        // 移动操作
        function move(t, k) {
            pos.x += k;
            for (var i = 0; i < 4; i++)
                pos.fk[i] *= t;
            update(is());
        }
        // 绑定按键事件
        document.onkeydown = function (e) {
            eval(keycom[(e ? e : event).keyCode]);
        };
        // 开始游戏
        start();
        // 设置定时下移
        run = setInterval("down()", 400);
    </script>
</body>

</html>